<template>
  <page-container :title="$route.meta.title">
    <el-card>
      <div slot="header">
        <span>关于系统</span>
      </div>
      
      <div class="about-content">
        <h3>Quartz定时任务管理系统</h3>
        <p>版本: v1.0.0</p>
        
        <el-divider></el-divider>
        
        <h4>系统介绍</h4>
        <p>本系统是一个基于Spring Boot和Quartz的定时任务管理平台，支持任务的动态配置、启停控制、日志查看等功能。</p>
        
        <el-divider></el-divider>
        
        <h4>技术栈</h4>
        <el-row :gutter="20">
          <el-col :span="12">
            <p><strong>后端:</strong></p>
            <ul>
              <li>Spring Boot 2.x</li>
              <li>Quartz 2.x</li>
              <li>MyBatis-Plus</li>
              <li>MySQL 8.0</li>
            </ul>
          </el-col>
          <el-col :span="12">
            <p><strong>前端:</strong></p>
            <ul>
              <li>Vue.js 2.x</li>
              <li>Element UI</li>
              <li>Axios</li>
              <li>Vite</li>
            </ul>
          </el-col>
        </el-row>
        
        <el-divider></el-divider>
        
        <h4>功能特点</h4>
        <ul>
          <li>支持Cron表达式的定时任务配置</li>
          <li>动态添加、编辑、删除定时任务</li>
          <li>任务的启动、暂停、立即执行操作</li>
          <li>详细的任务执行日志记录与查询</li>
          <li>支持任务并发控制</li>
        </ul>
        
        <el-divider></el-divider>
        
        <h4>使用须知</h4>
        <p>1. 新增任务时，执行类需继承BaseJob并实现execute方法</p>
        <p>2. Cron表达式请确保格式正确，系统提供表达式验证功能</p>
        <p>3. 对于耗时较长的任务，建议开启异步执行</p>
        <p>4. 定期清理任务日志，以保证系统性能</p>
      </div>
    </el-card>
  </page-container>
</template>

<script>
import PageContainer from '@/components/common/PageContainer.vue'

export default {
  name: 'About',
  components: {
    PageContainer
  }
}
</script>

<style scoped>
.about-content {
  line-height: 1.8;
}

.about-content h3 {
  color: #1890ff;
  margin-bottom: 15px;
}

.about-content h4 {
  margin: 15px 0;
  color: #333;
}

.about-content ul {
  padding-left: 20px;
}

.about-content li {
  margin: 5px 0;
}

.about-content p {
  margin: 8px 0;
}
</style>
</template>
